<template>
  <div class="ydb-container">
    <div class="page-content">
      <div class="dot-light">
        <img src="./assets/imgs/light.png" alt="" srcset="" />
      </div>
      <Header></Header>
      <div class="main-box">
        <div class="map-box">
          <marsMap />
        </div>
        <div class="info-box">
          <div class="info-title">
            <div class="titleTop-box">
              <!-- <span>数据来源：洪水预演</span> -->
              <!-- <span>{{ titleType == "1" ? "智慧防汛" : "工程特性" }}</span> -->
              <span v-if="titleType == '1'">智慧防汛</span>
              <!-- <span v-if="titleType == '2'">工程特性</span>
              <span v-if="titleType == '3'">进度</span>
              <span v-if="titleType == '4'">数据来源：洪水预演</span> -->
              <!-- <img
                @click="onTitleChange"
                src="./assets/imgs/exchange.png"
                alt=""
              /> -->
            </div>
            <!-- <div class="right-box">
              <span @click="titleType = '3'">进度</span>
            </div>
            <div class="right-box">
              <span style="margin-right: 3px" @click="getKml()">预演</span>
            </div> -->
          </div>
          <div class="info-detail">
            <!-- <Smart v-if="titleType == '1'" />
            <Base v-if="titleType == '2'" /> -->
            <!-- <Rehearsal /> -->
            <Step />
            <!-- <Smart v-if="titleType == '1'" />
            <Base v-if="titleType == '2'" />
            <Step v-if="titleType == '3'" />
            <Rehearsal v-if="titleType == '4'" /> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import marsMap from "./components/map/index.vue";
import Header from "./components/header/index.vue";
import Smart from "./pages/smart/index.vue";
import Base from "./pages/base/index.vue";
import Step from "./pages/step/index.vue";
import Rehearsal from "./pages/rehearsal/index2.vue";
import { ref } from "vue";
import { useStore } from "./store/index.ts";
import { onMounted } from "vue";
import { getLoginApi } from "./api/index";

const store = useStore();
let titleType = ref("1");
const onTitleChange = () => {
  if (titleType.value == "1") {
    titleType.value = "2";
  } else if (titleType.value == "2") {
    titleType.value = "1";
  } else {
    titleType.value = "1";
  }
};
const getKml = () => {
  titleType.value = "4";
  // 显示kml
  // store.showKml = true;
};

</script>

<style lang="less" scoped>
@import "./assets/fonts/font.css";

.ydb-container {
  width: 100vw;
  height: 100vh;
  background: url(./assets/imgs/background.png) no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  box-sizing: border-box;
  color: #fff;

  .page-content {
    width: 96.6vw;
    height: 92vh;
    // border: 1px solid red;
    margin: 0 auto;
    margin-top: 3vh;
    display: flex;
    flex-direction: column;
    padding: 0.5vh 1vh;
    box-sizing: border-box;

    .dot-light {
      position: absolute;
      top: 3.5%;
      left: 10%;

      img {
        display: block;
        width: 80%;
      }
    }

    .main-box {
      flex: 1;
      height: 80vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2vh;

      .map-box {
        margin-right: 1vw;
        width: 1357px;
        height: 100%;
        border: 3px solid #0060cb;
        -webkit-box-shadow: 0px 0px 20px 6px #0051ac inset;
        box-shadow: 0px 0px 20px 6px #0051ac inset;
        background: #000;
        z-index: 1;
        overflow: hidden;
        box-sizing: border-box;
      }

      .info-box {
        flex: 1;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .info-title {
          width: 100%;
          height: 40px;
          background: url(./assets/imgs/title_bg.png) left no-repeat;
          background-size: cover;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // border: 1px solid antiquewhite;
          box-sizing: border-box;

          .titleTop-box {
            display: flex;
            align-items: center;
            line-height: 37px;
            font-family: "PingFangBold";
            font-size: 20px;
            margin-left: 2vw;

            img {
              display: block;
              height: 35px;
              margin-left: 1vh;
              cursor: pointer;
            }
          }

          .right-box {
            width: 51px;
            height: 24px;
            line-height: 23px;
            cursor: pointer;
            text-align: center;
            font-size: 12px;
            margin-right: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);

            &:hover {
              color: #fffbd2;
              background: rgba(219, 201, 3, 0.3);
              border: 1px solid #e6d304;
            }
          }
        }

        .info-detail {
          flex: 1;
          // border: 1px solid aqua;
          padding-left: 1vh;
          box-sizing: border-box;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
